<template>
  <div class="box">
    <div class="top">
      <div class="top_item">
        <div class="nav-title" style="margin-bottom: 0.23rem;">单格位使用情况：</div>
        <div class="sort">
          <div>
            <p class="nav sort-top color-orange">已售未安放：{{ getBusinessDan.yIShouWFang }}</p>
            <p class="nav color-deongaree">已寄存：{{ getBusinessDan.yJiCun }}</p>
          </div>
          <div>
            <p class="nav sort-top color-light-blue">已售已安放：{{ getBusinessDan.yIShouAnFang }}</p>
            <p class="nav color-yellow">未使用格位：{{ getBusinessDan.wShiYong }}</p>
          </div>
        </div>
      </div>
      <div class="top_item">
        <div class="sort" style="align-items: end;">
          <div>
            <div class="nav-title right-nav-title">
              <p style="margin-bottom: 0.1rem">双格位使用情况：</p>
              <!-- <p class="right-nav">已全部安放：{{ getBusinessShaung.sQuBuAnFang }}</p> -->
            </div>
            <p class="nav sort-top color-orange">已售未安放：{{ getBusinessShaung.yIShouWFang }}</p>
            <p class="nav color-deongaree">已寄存：{{ getBusinessShaung.sYJiCun }}</p>
          </div>
          <div>
            <p class="nav sort-top color-light-blue">已全部安放：{{ getBusinessShaung.sQuBuAnFang }}</p>
            <p class="nav sort-top">已部分安放：{{ getBusinessShaung.BuAnFang }}</p>
            <p class="nav color-yellow">未使用格位：{{ getBusinessShaung.sWShiYong }}</p>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 100%;display: flex;align-items: center;justify-content: space-between;">
      <div class="mapChart" ref="mapChart"></div>
      <div class="mapChart" ref="mapChart1"></div>
    </div>
  </div>
</template>

<script>
import * as Api from "@/api/home";
import countTo from "vue-count-to";
import huohua from "@/assets/imgs/huohua.png";
export default {
  name: "homeLeftTop",
  components: {
    countTo,
  },
  data() {
    return {
      huohua,
      getBusinessDan: {
        wShiYong: 0,
        yJiCun: 0,
        yIShouWFang: 0,
        yIShouAnFang: 0,
        zGeWei: 0,
      },
      getBusinessShaung: {
        BuAnFang: 0,
        sQuBuAnFang: 0,
        sWShiYong: 0,
        sYJiCun: 0,
        sZGeWei: 0,
        yIShouWFang: 0
      },
      chart: null,
      color: ["#FF9C5D", "#00BEFF", "#2D69D8", "#EAAB00"],
      chartRight: null,
      colorRight: ["#FF9C5D", "#1DF9FC", "#2D69D8", "#EAAB00", "#2FC0FF"],
    };
  },
  mounted() {
    // 初始化
    this.initChart();
    this.initChartRight();
    this.getData()
    window.addEventListener("resize", this.screenAdapter);
  },
  methods: {
    async getData() {
      let { data } = await this.$axios({
        method: 'post',
        url: `${this.baseUrl}?action=BusinessJC`
      })
      if (data._issuccess !== 1) return this.$message.error(data._msg)
      let getBusinessDan = data._data.getBusinessDan[0]
      this.getBusinessDan = getBusinessDan
      let getBusinessShaung = data._data.getBusinessShaung[0]
      this.getBusinessShaung = getBusinessShaung
      this.updateChart()
      this.updateChartRight()
    },
    // 首页左上角柱状图
    initChart() {
      this.chart = this.$echarts.init(this.$refs.mapChart);
      let initOption = {

        tooltip: { trigger: "item", textStyle: { fontSize: '0.15rem', } },
        legend: { textStyle: { color: "#ffffff" }, show: false },

      };

      this.chart.setOption(initOption);

    },
    updateChart() {
      let arr = [
        { name: '已售未安放', value: this.getBusinessDan.yIShouWFang },
        { name: '已售已安放', value: this.getBusinessDan.yIShouAnFang },
        { name: '已寄存', value: this.getBusinessDan.yJiCun },
        { name: '未使用', value: this.getBusinessDan.wShiYong },
      ]
      const dataOption = {
        color: this.color,
        title: [
          {
            text: this.getBusinessDan.zGeWei,
            x: "center",
            y: "40%",
            textStyle: {
              fontSize: '0.35rem',
              fontWeight: "bolder",
              color: "#1DF9FC",
            },
          },
          {
            text: "单格位总数",
            x: "center",
            y: "52%",
            textStyle: {
              fontSize: '0.2rem',
              color: "#1DF9FC",
            },
          },

        ],
        series: {
          type: 'pie', center: ["50%", "50%"], radius: ["40%", "70%"],
          showEmptyCircle: true,
          label: { fontSize: '0.2rem', show: false },
          data: arr.map((item, index) => {
            return {
              label: {
                color: this.color[index],
              },
              ...item
            }
          }),

        }
      }
      this.chart.setOption(dataOption)
    },


    // 右侧饼状图
    initChartRight() {
      this.chartRight = this.$echarts.init(this.$refs.mapChart1);
      let initOption = {

        tooltip: { trigger: "item", textStyle: { fontSize: '0.15rem', } },
        legend: { textStyle: { color: "#ffffff" }, show: false },

      };

      this.chartRight.setOption(initOption);

    },
    updateChartRight() {
      let arr = [
        { name: '已售未安放', value: this.getBusinessShaung.yIShouWFang },
        { name: '已部分安葬', value: this.getBusinessShaung.BuAnFang },
        { name: '已寄存', value: this.getBusinessShaung.sYJiCun },
        { name: '未使用', value: this.getBusinessShaung.sWShiYong },
        { name: '已全部安放', value: this.getBusinessShaung.sQuBuAnFang },
      ]
      const dataOption = {
        color: this.colorRight,
        title: [
          {
            text: this.getBusinessShaung.sZGeWei,
            x: "center",
            y: "40%",
            textStyle: {
              fontSize: '0.35rem',
              fontWeight: "bolder",
              color: "#1DF9FC",
            },
          },
          {
            text: "双格位总数",
            x: "center",
            y: "52%",
            textStyle: {
              fontSize: '0.2rem',
              color: "#1DF9FC",
            },
          },

        ],
        series: {
          type: 'pie', center: ["50%", "50%"], radius: ["40%", "70%"],
          showEmptyCircle: true,
          label: { fontSize: '0.2rem', show: false },
          data: arr.map((item, index) => {
            return {
              label: {
                color: this.color[index],
              },
              ...item
            }
          }),

        }
      }
      this.chartRight.setOption(dataOption)
    },

    // 屏幕变化
    screenAdapter() {
      this.chart.resize();
      this.chartRight.resize();
    },
  },
  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  height: 5.075rem;
  padding: .25rem .125rem 0;
  box-sizing: border-box;
  background: url('../../assets/imgs/box-border.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .top {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top_item {
      width: 3.5rem;
      height: 1.175rem;
      background: url('../../assets/imgs/lititle.png') no-repeat;
      background-size: 100% 100%;
      font-weight: 600;
      padding: .15rem;
      font-size: 0.1rem;

      .sort {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .sort-top {
          margin-bottom: .11rem;
        }

        .color-orange {
          color: #FF9C5D
        }

        .color-deongaree {
          color: #3B80FF;
        }

        .color-light-blue {
          color: #2FC0FF;
        }

        .color-yellow {
          color: #EAAB00;
        }
      }
    }

    .nav-title {
      margin-bottom: .15rem;
      color: #1DF9FC;
    }

    .right-nav-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: .13rem
    }

    .right-nav {
      margin-top: .07rem;
      color: #2FC0FF;
    }
  }

  .mapChart {
    height: 100%;
    flex: 1;
  }
}
</style>
